<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        #progress {
          border-bottom: 2px solid blue;
          width: 0;
          position: fixed;
          top: 0; left: 0;
        }
      </style>
      <div id="progress"></div>
      <script>
        // Create some content
        document.body.appendChild(document.createTextNode(
          "supercalifragilisticexpialidocious ".repeat(1000)));
      
        let bar = document.querySelector("#progress");
        window.addEventListener("scroll", () => {
          let max = document.body.scrollHeight - innerHeight;
          bar.style.width = `${(pageYOffset / max) * 100}%`;
        });
      </script>
</body>
</html>